<template>
  <view>
    <!-- 自定义导航栏 -->
    <view class="navBarBox">
      <!-- 状态栏占位 -->
      <view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
      <!-- 真正的导航栏内容 -->
      <NavBar :navList="navList" @change="(index: number) => (current = index)" />
    </view>
    <!-- 页面内容 -->
    <view v-if="current === 0">
      <Notice></Notice>
    </view>
    <view v-else-if="current === 1">互换页面内容</view>
    <view v-else>访客页面内容</view>
  </view>
</template>

<script setup lang="ts">
import NavBar from '@/components/NavBar.vue'
import Notice from './components/Notice.vue'
import { ref, watch } from 'vue'
import { onShow } from '@dcloudio/uni-app'
// 设置安全区域
const statusBarHeight = uni.getSystemInfoSync()['statusBarHeight']
const gointerchange = () => {
  if (current.value === 1) {
    uni.navigateTo({
      url: '/pages/message/interchange/interchange',
    })
  }
}
// 导航栏组件
const navList = ref(['通知', '互换', '访客'])
const current = ref(0)
watch(current, (newVal) => {
  gointerchange()
})
onShow(() => {
  current.value = 0
})
const onOpen = () => {
  console.log('WebSocket连接已打开')
}
const onMessage = (e: any) => {
  console.log('收到消息：', e.data)
}
const onClose = () => {
  console.log('WebSocket连接已关闭')
}
</script>

<style scoped lang="scss"></style>
